<template>
  <span
      :class="[
      'content-each',
      type === 'hostIp'
        ? 'first-content'
        : type === 'softwareName'
        ? 'last-content'
        : '',
    ]"
  >
    {{ label }}=
    <span v-if="type !== 'hostIp' && type !== 'targetIp'"
    >{{ typeValue }}
    </span>

    <el-popover
        placement="bottom"
        v-model="assetInfoVisible"
        v-if="type === 'hostIp' || type === 'targetIp'"
    >
      <div>地址信息：{{ results.position || '暂无信息' }}</div>
      <div>资产名称：{{ results.assetName }}</div>
      <div>业务类型：{{ results.businessType }}</div>
      <div>资产类型编码：{{ results.assetType }}</div>
      <template slot="reference">
        <span
            class="link"
            @mouseenter="getAssetInfo"
            @mouseleave="assetInfoHidden"
        >{{ typeValue }}
        </span>
      </template>
    </el-popover>
  </span>
</template>

<script>
import { getAssetInfo } from '@/api/alarmCenter/index'

export default {
  name: 'Popover',
  props: {
    width: {
      type: Number,
      default: 180
    },

    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    typeValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      assetInfoVisible: false,
      results: {
        position: '', //地址信息
        assetName: '', //资产名称
        businessType: '' //业务类型
      },
      isOver: false, //鼠标是否移入
      timer: null,
      startTime: null //鼠标移入时间
    }
  },

  methods: {
    getAssetInfo() {
      if (this.type === 'hostIp' || this.type === 'targetIp') {
        this.isOver = true
        this.startTime = new Date().getTime()
        this.timer = setTimeout(() => {
          getAssetInfo({ manageIp: this.typeValue }).then((res) => {
            this.assetInfoVisible = this.isOver;
            if (res && res.code === 200) {
              if (res.data) {
                this.results = res.data
              } else {
                this.results = {
                  position: '', //地址信息
                  assetName: '', //资产名称
                  businessType: '', //业务类型
                  assetType: ''
                }
              }
            } else {
              this.results = {
                position: '', //地址信息
                assetName: '', //资产名称
                businessType: '', //业务类型
                assetType: ''
              }
            }
          })
        },500)
      }
    },
    assetInfoHidden() {
      this.assetInfoVisible = false
      this.isOver = false;
      let endTime = new Date().getTime();
      if (endTime - this.startTime < 500) {
        //防止鼠标来回移动触发事件
        clearTimeout(this.timer);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content-each {
  border-right: 1px dashed grey;
  padding: 0 10px;
  cursor: pointer;
}

.first-content {
  padding: 0px 10px 0px 0px;
}

.last-content {
  border-right: 0;
}

.link {
  color: var(--theme-color);
}
</style>
